window.onload = function(){
    var imgs = document.querySelectorAll(".imgbox>li")
    var lis = document.querySelectorAll(".banner>ol>li")
    var pre = document.querySelector("#pre")
    var next = document.querySelector("#next")
    var index =0;
    //封装函数，图片变化，小按钮样式变化
    function imgToggle(index){
         // 移除class样式 隐藏图片
        for(var i =0;i<lis.length;i++){
            lis[i].classList.remove('active');
            imgs[i].style.display = 'none';
        }
        // 为当前点击的li添加class样式 显示图片
        lis[index].classList.add('active');
        imgs[index].style.display = 'block';
    }
    // 右键点击下一张
    next.onclick = function(){
        index++
        if(index>4){
            index = 0;
        }
        // 调用函数 
        imgToggle(index)
    }
    // 左键点击上一张
    pre.onclick = function(){
        index--;
        // 到第一张重置
        if(index<0){
            index = 4;
        }
        imgToggle(index)
    }
    // 小按钮点击 显示对应图片
    for(var i = 0;i<lis.length;i++){
        // 获取当前点击的下标
        lis[i].index = i;
        lis[i].onclick = function(){
            var index = this.index;
            imgToggle(index)
        }
    }
    // 定时器调用右键函数实现轮播
    function slide(){
        var time = setInterval(function(){
            next.onclick()
        },2000)
    }
    slide();
}